
<link href='{{ asset("fullcalendar-4.2.0/packages/core/main.css") }}' rel='stylesheet' />
<link href='{{ asset("fullcalendar-4.2.0/packages/daygrid/main.css") }}' rel='stylesheet' />
<script src='{{ asset("fullcalendar-4.2.0/packages/core/main.js") }}'></script>
<script src='{{ asset("fullcalendar-4.2.0/packages/interaction/main.js") }}'></script>
<script src='{{ asset("fullcalendar-4.2.0/packages/daygrid/main.js") }}'></script>
<script src='{{ asset("fullcalendar-4.2.0/packages/core/locales/zh-cn.js") }}'></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid' ],
			locale: "zh-cn",
			header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      buttonText: {
        today: 'today',
        month: 'month',
        week: 'week',
        day: 'day'
      },
      defaultDate: "{{ date('Y-m-d', time()) }}",
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: function(dateInfo, callback, unknown) {

				var month;
				if (dateInfo.start.getDate() === 1){
					month = dateInfo.start.getMonth() + 1<10? "0"+(dateInfo.start.getMonth() + 1):dateInfo.start.getMonth() + 1;
				}else{
					month = dateInfo.start.getMonth() + 2<10? "0"+(dateInfo.start.getMonth() + 2):dateInfo.start.getMonth() + 2;
				}
				var theDate = dateInfo.start.getFullYear() + '-' + month;
				
				var url = "{!! $url !!}&date="+theDate;
				$.get(url, function(result){
				    callback(result);
				});
			}
    });

    calendar.render();
  });

</script>
<style>

  #calendar {
    /*max-width: 800px;*/
    margin: 0 auto;
  }
  
  .fc-day{
  	background-color: #FFFFFF;
  }

</style>

<!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-md-3">
          <div class="box box-solid">
            <div class="box-header with-border">
              <h4 class="box-title">说明</h4>
            </div>
            <div class="box-body">
              <!-- the events -->
              <div id="external-events">
                <div class="external-event bg-green">Lunch</div>
                <div class="external-event bg-yellow">Go home</div>
                <div class="external-event bg-aqua">Do homework</div>
                <div class="external-event bg-light-blue">Work on UI design</div>
                <div class="external-event bg-red">Sleep tight</div>
                <!--<div class="checkbox">
                  <label for="drop-remove">
                    <input type="checkbox" id="drop-remove">
                    remove after drop
                  </label>
                </div>-->
              </div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /. box -->
          <div class="box box-solid">
            <!--<div class="box-header with-border">
              <h3 class="box-title">Create Event</h3>
            </div>-->
            <div class="box-body">
              <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
                <!--<ul class="fc-color-picker" id="color-chooser">
                  <li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li>
                  <li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li>
                  <li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li>
                  <li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li>
                  <li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li>
                  <li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li>
                  <li><a class="text-green" href="#"><i class="fa fa-square"></i></a></li>
                  <li><a class="text-lime" href="#"><i class="fa fa-square"></i></a></li>
                  <li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li>
                  <li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li>
                  <li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li>
                  <li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li>
                  <li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li>
                </ul>-->
              </div>
              <!--<div class="input-group">
                <input id="new-event" type="text" class="form-control" placeholder="Event Title">

                <div class="input-group-btn">
                  <button id="add-new-event" type="button" class="btn btn-primary btn-flat">Add</button>
                </div>
              </div>-->
            </div>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-md-9">
          <div class="box box-primary">
            <div class="box-body no-padding">
              <!-- THE CALENDAR -->
              <div id="calendar"></div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /. box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

<!--<div id='calendar'></div>-->


